<template>
  <div class="production-schedule">
    <div class="search-container">
      <el-form :inline="true" class="search-form">
        <el-form-item label="客户名称:">
          <el-input
            v-model="searchForm.customer"
            placeholder="请输入客户名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="物料订单号:">
          <el-input
            v-model="searchForm.orderNumber"
            placeholder="请输入物料订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="生产工单编号:">
          <el-input
            v-model="searchForm.productionNumber"
            placeholder="请输入生产工单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="resetSearch">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 左侧产品列表 -->
    <div class="product-list">
      <el-card class="product-card">
        <div
          v-for="(item, index) in productList"
          :key="index"
          class="product-item"
          :class="{ active: selectedProduct === index }"
          @click="selectProduct(index)"
        >
          <div class="product-code">{{ item.code }}</div>
          <div class="product-desc">{{ item.description }}</div>
        </div>
      </el-card>
    </div>

    <!-- 右侧生产进度表格 -->
    <div class="schedule-table">
      <el-card>
        <div class="table-header">
          <el-button type="primary" size="small" @click="handleCopy"
            >复制</el-button
          >
        </div>
        <el-table :data="scheduleData" style="width: 100%" border>
          <el-table-column
            type="index"
            label="工序号"
            width="70"
            align="center"
          />
          <el-table-column
            prop="processName"
            label="工序"
            width="100"
            align="center"
          />
          <el-table-column
            prop="machineId"
            label="机/刀具号"
            width="100"
            align="center"
          />
          <el-table-column
            prop="processingTime"
            label="加工时长"
            width="100"
            align="center"
          />
          <el-table-column
            prop="calculatedTime"
            label="计划加工时间"
            width="120"
            align="center"
          />
          <el-table-column
            prop="planStartTime"
            label="计划开始时间"
            width="150"
            align="center"
          />
          <el-table-column
            prop="actualStartTime"
            label="实际开始时间"
            width="150"
            align="center"
          />
          <el-table-column
            prop="planEndTime"
            label="计划结束时间"
            width="150"
            align="center"
          />
          <el-table-column
            prop="actualEndTime"
            label="实际结束时间"
            width="150"
            align="center"
          />
          <el-table-column
            prop="operator"
            label="工序"
            width="100"
            align="center"
          />
          <el-table-column
            prop="remark"
            label="备注"
            min-width="120"
            align="center"
          />
          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="viewSubProcess(row)"
                >查看子工序信息</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <span>共 {{ totalItems }} 条记录</span>
          <el-pagination
            layout="prev, pager, next"
            :total="totalItems"
            :page-size="10"
            @current-change="handlePageChange"
          />
          <span>10 条/页</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

// 搜索表单
const searchForm = reactive({
  customer: "",
  orderNumber: "",
  productionNumber: "",
});

// 产品列表数据
const productList = ref([
  {
    code: "HWCD000027-RCT2037-16硅片冷却器件-200",
    description: "硅片冷却器件-200",
  },
  {
    code: "CZMDJ-SA240320002D002-东西-11",
    description: "东西-11",
  },
  {
    code: "HWCD000036-绝缘端-10",
    description: "绝缘端-10",
  },
  {
    code: "HWCD000037-φ10.0圆锥杆-20",
    description: "φ10.0圆锥杆-20",
  },
  {
    code: "HWCD000038-RCT2037-16硅片冷却器件-100",
    description: "硅片冷却器件-100",
  },
  {
    code: "YBGD00000375-RCT2037-16硅片冷却器件-100-0",
    description: "硅片冷却器件-100-0",
  },
]);

// 选中的产品
const selectedProduct = ref(0);

// 生产进度数据
const scheduleData = ref([
  {
    processName: "车加工",
    machineId: "1",
    processingTime: "10",
    calculatedTime: "",
    planStartTime: "2023-05-04",
    actualStartTime: "",
    planEndTime: "",
    actualEndTime: "",
    operator: "10",
    remark: "车削工序说明",
  },
  {
    processName: "车加工",
    machineId: "2",
    processingTime: "20",
    calculatedTime: "",
    planStartTime: "",
    actualStartTime: "",
    planEndTime: "",
    actualEndTime: "",
    operator: "10",
    remark: "车削工序说明",
  },
]);

// 总记录数
const totalItems = ref(2);

// 选择产品
const selectProduct = (index) => {
  selectedProduct.value = index;
  // 这里可以根据选中的产品加载对应的生产进度数据
  // loadScheduleData(productList.value[index].code)
};

// 搜索
const handleSearch = () => {
  console.log("搜索条件:", searchForm);
  // 实际应用中这里会调用API获取数据
};

// 重置搜索
const resetSearch = () => {
  searchForm.customer = "";
  searchForm.orderNumber = "";
  searchForm.productionNumber = "";
};

// 复制
const handleCopy = () => {
  console.log("复制操作");
  // 实现复制功能
};

// 分页
const handlePageChange = (page) => {
  console.log("当前页:", page);
  // 加载对应页的数据
};

// 查看子工序信息
const viewSubProcess = (row) => {
  console.log("查看子工序信息:", row);
  // 在此处实现查看逻辑，例如弹出对话框或跳转详情页
};
</script>

<style scoped>
.production-schedule {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-container {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.product-list {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}

.product-card {
  padding: 0;
}

.product-item {
  padding: 10px 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.product-item:hover {
  background-color: #f5f7fa;
}

.product-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.product-code {
  font-weight: bold;
  margin-bottom: 5px;
}

.product-desc {
  color: #606266;
  font-size: 13px;
}

.schedule-table {
  width: 100%;
}

.table-header {
  margin-bottom: 15px;
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
</style>
